<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="<%=basePath %>/resource/layui/css/layui.css"/>
<link rel="stylesheet" href="<%=basePath %>/resource/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath %>/resource/fileupload/fileinput.min.css"/>
<title>合同上传</title>
<style type="text/css">
	
	body {
		padding: 10px;
		padding-top: 0px;
	}
	
	.layui-tab-content {
		padding: 0px;
	}
	
	.layui-tab {
		margin-top: 0px;
	}
	
	label {
		display: unset;
    	max-width: 0%;
    	margin-bottom: 0px;
    	font-weight: 0;
	}
	
</style>
</head>
<body>

	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">上传报销单据</li>
	    <li>上传报销单据</li>
	  </ul>
	  <div class="layui-tab-content">
	  	 <div class="layui-tab-item layui-show">
		  	 <form method="post" enctype="multipart/form-data">  
		    	<input id="receiptImagesUpload" name="receiptImages" type="file" multiple class="col-sm-10"/>
	    	 </form>
    	 </div>
    	 <div class="layui-tab-item">
    	 	<div class="row" id="receiptShow">
			</div>
    	 </div>
	  </div>
	</div> 

	<script type="text/javascript" src="<%=basePath %>/resource/js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/resource/layui/layui.all.js"></script>
	<script type="text/javascript" src="<%=basePath %>/resource/bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/resource/fileupload/fileinput.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/resource/fileupload/zh.js"></script>
	<script type="text/javascript">
	
		var path = "<%=basePath %>";
	
		//加载table选项卡
		layui.use('element', function(){
		  var element = layui.element;
		});
		
		//上传属性
	    $("#receiptImagesUpload").fileinput({
	        uploadUrl: path+"/financial/reimburse/receiptImagesUpload",
	        uploadAsync : true, //默认异步上传
	        showUpload : true, //是否显示上传按钮,跟随文本框的那个
	        showRemove : true, //显示移除按钮,跟随文本框的那个
	        showCaption : true,//是否显示标题,就是那个文本框
	        showPreview : true, //是否显示预览,不写默认为true
	        dropZoneEnabled : true,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
	        maxFileCount : 5, //表示允许同时上传的最大文件个数
	        enctype : 'multipart/form-data',
	        validateInitialCount : true,
	        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
	        msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
	        allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
	        allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
	        allowedPreviewMimeTypes : [ 'jpg', 'png','jpeg' ],//控制被预览的所有mime类型
	        language : 'zh',
	        textEncoding : "UTF-8",
	        uploadExtraData : {id : parent.reimburseId}
	    })
	    
	    //加载之前就存在的合同数据
	    $.get(path+"/financial/reimburse", { reimburseId: parent.reimburseId}, function(data){
		   
	    	var showEle = $("#receiptShow");
	    	
	    	//对拿到的字符进行切割
	    	var receiptImgUrl = data[0].reimburseReceiptPath.split("|");
	    	
	    	//从角标1开始遍历,因为角标0第一个切割完后是一个空字符数组
	    	for(var i = 1;i<receiptImgUrl.length;i++){
	    		
	    		var imgPath = path+"/pic/receipt/"+receiptImgUrl[i];
	    		
	    		showEle.append(
    				 '<div class="col-sm-3 col-md-3">'+
	    				'<a href="'+imgPath+'" class="thumbnail" target= _blank style="width: 150px;height: 200px;">'+
	    					'<img src="'+imgPath+'" style="width: 100%;height: 100%;">'+
		 			    '</a>'+
	 			     '</div>'
	    		);
	    	}
	    	
	    });
	    
	</script>
</body>
</html>